<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { TSystemTitle } from '../../../../Types/system'
import { updateSystemTitleService } from '../../../../api/system/title'
import { useSystemStore } from '../../../../stores/modules/system'

const systemStore = useSystemStore()
const loading = ref(false)

// 默认标题表单
const defaultTitleData = {
	title: '成绩系统',
	fontColor: '#303133',
	fontSize: 30
} as TSystemTitle

// 初始化表单
const titleData = ref<TSystemTitle>({ ...defaultTitleData })

// // 比较两个对象是否相等
// const isEqual = (obj1: any, obj2: any) => {
// 	return (
// 		obj1.title === obj2.title &&
// 		obj1.backgroundColor === obj2.backgroundColor &&
// 		obj1.fontColor === obj2.fontColor &&
// 		obj1.fontSize === obj2.fontSize
// 	)
// }

// 更新系统标题
const saveSetting = async () => {
	// if (isEqual(titleData.value, systemStore.systemTitle)) {
	// 	ElMessage.info('未进行任何修改')
	// 	return
	// }

	loading.value = true
	try {
		const res = await updateSystemTitleService(titleData.value)
		if (res.data.code === 1) {
			systemStore.reviseSystemTitle(titleData.value)
			ElMessage.success('修改成功')
		}
	} catch (error) {
		ElMessage.error('修改失败')
	}
	loading.value = false
}

// 清空设置
const emptySetting = () => {
	titleData.value = { ...defaultTitleData }
}

// 重置系统标题为默认值
const resetSetting = () => {
	// if (isEqual(titleData.value, defaultTitleData)) {
	// 	ElMessage.info('当前已是默认值')
	// 	return
	// }

	ElMessageBox.confirm('确定要恢复系统预设值吗？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(async () => {
		loading.value = true
		try {
			titleData.value = { ...defaultTitleData }
			const res = await updateSystemTitleService(titleData.value)
			if (res.data.code === 1) {
				systemStore.reviseSystemTitle(titleData.value)
				ElMessage.success('已恢复系统预设值')
			}
		} catch (error) {
			ElMessage.error('恢复失败')
		}
		loading.value = false
	})
}

// 初始化
onMounted(async () => {
	await systemStore.getSystemTitle()
	const titleResult = systemStore.systemTitle
	if (titleResult) {
		titleData.value = titleResult
	}
})
</script>

<template>
	<el-card class="title-card">
		<template #header>
			<div class="card-header">
				<h2>系统标题设置</h2>
			</div>
		</template>

		<el-form :model="titleData" label-width="100px">
			<el-form-item label="系统标题">
				<el-input v-model="titleData.title" placeholder="请输入系统标题" style="width: 40%" />
			</el-form-item>

			<el-form-item label="文字颜色">
				<el-color-picker v-model="titleData.fontColor" show-alpha />
			</el-form-item>

			<el-form-item label="字体大小">
				<el-input v-model="titleData.fontSize" placeholder="请输入字体大小" style="width: 40%" />
			</el-form-item>

			<el-form-item>
				<div class="button-group">
					<el-button type="primary" @click="saveSetting">更新设置</el-button>
					<el-button type="info" @click="emptySetting">清空设置</el-button>
					<el-button type="danger" @click="resetSetting">重置</el-button>
				</div>
			</el-form-item>
		</el-form>
	</el-card>
</template>
